<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <!--按顺序引入-->
  <script src="https://cdn.staticfile.org/react/17.0.1/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/17.0.1/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
  <style>
    body {
      width: 95vw;
      height: 80vh;
      background-color: #2b2b2b;
      color: wheat;
    }
  </style>
</head>
<body>
<div id="app"></div>

<script type="text/babel">
  class Demo extends React.Component {

    constructor(props) {
      console.log('constructor')
      super(props)
      this.state = {count: 0}
    }

    // 组件挂载前 -- 废弃
    //UNSAFE_componentWillMount() {
    //  console.log('componentWillMount')
    //}

    // 生命周期 组件挂载完毕
    componentDidMount() {
      console.log('componentDidMount')
    }
    
    // 静态方法
    static getDerivedStateFromProps(props) {
      console.log('getDerivedStateFromProps')
      return null
    }

    // 组件是否应该更新 -- 调用setState触发该勾子
    shouldComponentUpdate() {
      console.log('shouldComponentUpdate')
      return true // true 表示更新 false表示不更新 默认为真
    }

    // 组件将更新 forceUpdate() 后也执行该勾子 -- 废弃
    //UNSAFE_componentWillUpdate() {
    //  console.log('componentWillUpdate')
    //}
    
    // 返回值会传给componentDidUpdate第三个参数snapshot
    getSnapshotBeforeUpdate(preProps, preState) {
      console.log('getSnapshotBeforeUpdate')
      return null
    }

    // 组件更新后 在render之后 preProps, preState 都是更新之前的数据
    componentDidUpdate(preProps, preState, snapshotValue) {
      console.log('componentDidUpdate')
    }

    // 组件将卸载时
    componentWillUnmount() {
      console.log('componentWillUnmount')
    }

    // 初始化
    render() {
      console.log('render')
      return (
        <div>
          <First/>
          <h2>当前求和为: {this.state.count}</h2>
          <button onClick={this.plus}>+1</button>
          <button onClick={this.unMountComponent}>卸载</button>
          <button onClick={this.forceUpdateComponent}>强制更新</button>
        </div>
      )
    }

    plus = () => {
      const {count} = this.state
      this.setState({count: count + 1})
    }
    unMountComponent = () => {
      ReactDOM.unmountComponentAtNode(document.getElementById('app'))
    }
    forceUpdateComponent = () => {
      this.forceUpdate()
    }
  }

  class First extends React.Component {
    state = {car: '小单车'}
    
    render() {
      return (
        <div>First
          <Second car={this.state.car}/>
        </div>
      )
    }
  }
  
  class Second extends React.Component {
    static propTypes = {
      car: PropTypes.string.isRequired
    }
    
    // 将接收新的props的勾子 -- 废弃
    //UNSAFE_componentWillReceiveProps(props) {
    //  console.log('componentWillReceiveProps', props)
    //}
    
    
    render() {
      return (
        <div>Second
          <h2>{this.props.car}</h2>
        </div>
      )
    }
  }

  ReactDOM.render(<Demo/>, document.getElementById('app'))
</script>
</body>
</html>
